<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../libs/vue.js"></script>
    <link rel="stylesheet" href="../libs/animate.css">
    <style>
        .static{
            width:140px;
            height:140px;
            margin:20px;
            text-align: center;
            line-height: 140px;
            color:#fff;
            font-size: 30px;
        }
        .a{
            background: darkgoldenrod;
        }
        .b{
            border:4px solid darkred;
        }
        .c{
            border-radius: 50%;
            box-shadow:  0 0 5px 0px  #ccc;
        }
        @keyframes move {
            from{
                transform: scale(0) rotate(0);
            }
            to{
                transform: scale(1) rotate(360deg);
            }
        }
        .move{
            animation: move 4s ;
        }
        .img{
            width:160px;
            height:160px;
            margin:20px;
            border-radius: 50%;
            transition: all 2s;
        }

        .a-enter{
            transform: scale(0);
            opacity: 0;
        }
        .a-enter-to{
            transform: scale(1);
            opacity: 1;
        }
        .a-leave{
            transform: scale(1);
            opacity: 1;
        }
        .a-leave-to{
            transform: scale(0);
            opacity: 0;
        }

        @keyframes min {
            0%{
                transform: scale(0) rotate(0) translateX(-100%);
            }
            100%{
                transform: scale(1) rotate(360deg) translateX(0%);
            }
        }
        @keyframes mout {
            0%{
                transform: scale(1) rotate(360deg) translateX(0%);
            }
            100%{
                transform: scale(0) rotate(0) translateX(-100%);
            }
        }
        .fade-enter-active{
            animation: min 2s 0s;
        }
        .fade-leave-active{
            animation: mout 2s 0s;
        }

        .slide-enter-active{
            animation: slideInLeft 1.5s;
        }
        .slide-leave-active{
            animation: slideOutRight  1.5s;
        }

        .zoom-enter-active{
            animation: zoomInDown 1.4s;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1.4s;
        }

    </style>
</head>
<body>
    <div id="app">
        <h2 class="move"> {{ title}} </h2>
        <div>
            <transition name="a" >
                <img v-if="show"  :src="imgSrc" class="img"  alt="">
            </transition>  
            
            <button @click="show=!show">点击切换</button>
        </div>
        <div>
            <transition name="fade" >
                <img v-if="show1"  :src="imgSrc" class="img"  alt="">
            </transition>  
            <button @click="show1=!show1">点击切换1</button>
        </div>

        <div>
            <transition name="slide" >
                <img v-if="show2"  :src="imgSrc" class="img"  alt="">
            </transition>  
            <button @click="show2=!show2">点击切换2</button>
        </div>

        <div>
            <transition name="zoom" appear appear-active-class="move" >
                <img v-if="show3"  :src="imgSrc" class="img "  alt="">
            </transition>  
            <button @click="show3=!show3">点击切换3</button>
        </div>
    </div>
    <script>

        const vm = new Vue({
            data:{
                title:"Vue - 快速实现动画 ",      
                imgSrc:"http://47.104.209.44/base/imgs/1.jpg" ,
                show:true, 
                show1:true,
                show2:true,
                show3:true 
            },
            mounted(){
                document.querySelectorAll('title')[0].innerHTML = this.title;
                
            }
        }).$mount("#app")
    </script>
    <!-- 

        route  页面切换    进入和离开的动画  
        Vue 提供了 transition 的封装组件  任何元素和组件添加进入/离开过渡
        v-if
        v-show
        组件切换  (动态组件切换  子组件切换)


        过渡  (0-1)  
        在进入/离开的过渡中，会有 6 个 class 切换
        v-enter  进入之前    开始帧 过渡
        v-enter-active 正在进入   animation
        v-enter-to  进入完成   结束帧

        v-leave  离开之前
        v-leave-active  正在离开
        v-leave-to   离开完成

        v-   transition 没有name 默认 v-
        transition 添加 name = fade  v 替换成 fade 

        初始化渲染 过渡 
        appear
        appear-active-class  动画 

        v-if / v-show 
     -->
    
</body>
</html>